import { useMemo, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "swiper/css/effect-fade";

import styles from "../styles/swiper.module.scss";

// import "./styles.css";

// import required modules
import { FreeMode, EffectFade, Navigation, Thumbs } from "swiper/modules";

import { swiperData, wheelsData } from "../data";

interface IProps {
	index: number;
	activeWheels: number;
	activeWheels2: number;
	activeWheels3: number;
}

export default function App(props: IProps) {
	const { index, activeWheels, activeWheels2, activeWheels3 } = props;

	const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);

	const swiperList = useMemo(() => {
		// wheelsData
		const i = activeWheels * 3;
		const i2 = activeWheels2 * 2;
		const i3 = activeWheels3 * 2;
		const data = {
			first: [
				...wheelsData[index].first.slice(i, i + 3),
				...swiperData[index].first.slice(i2, i2 + 2),
				...swiperData[index].first.slice(i3, i3 + 2)
			].reverse(),
			second: [
				...wheelsData[index].first.slice(i, i + 3),
				...swiperData[index].first.slice(i2, i2 + 2),
				...swiperData[index].first.slice(i3, i3 + 2)
			].reverse()
			// second: [...wheelsData[index].second.slice(i, i + 3), ...swiperData[index].second]
		};
		return data;
	}, [index, activeWheels, activeWheels2, activeWheels3]);

	return (
		<div className={styles["swiper-wrap"]}>
			<Swiper
				// style={{
				// 	"--swiper-navigation-color": "#fff",
				// 	"--swiper-pagination-color": "#fff"
				// }}
				loop={true}
				spaceBetween={10}
				effect={"fade"}
				// navigation={true}
				thumbs={{ swiper: thumbsSwiper }}
				modules={[FreeMode, EffectFade, Navigation, Thumbs]}
				className="mySwiper2"
			>
				{swiperList.first.map((item, i) => (
					<SwiperSlide key={i + 100}>
						<img src={item} />
					</SwiperSlide>
				))}
			</Swiper>

			<Swiper
				onSwiper={setThumbsSwiper}
				// loop={true}
				spaceBetween={10}
				slidesPerView={7}
				freeMode={true}
				watchSlidesProgress={true}
				modules={[FreeMode, Navigation, Thumbs]}
				className="mySwiper"
			>
				{swiperList.second.map((item, i) => (
					<SwiperSlide key={i + 1000}>
						<img src={item} />
					</SwiperSlide>
				))}
			</Swiper>
		</div>
	);
}
